<template>
    <div class="container">
        <el-row v-if="passRole(['admin', '鑫珑名品运营管理员'])">
            <el-col :span="24" style="background-color: #FFF;height: 120px;padding: 20px;border-right: #eee 10px solid;">
                <div style="font-size: 14px;color: #333;font-weight: bold;">快捷操作</div>
                <!-- <el-button plain style="margin-top: 20px;" @click="setGoldAction">金价设置</el-button> -->
                <el-button plain style="margin-top: 20px;" @click="quickOperationAction(1)">平台设置</el-button>
                <el-button plain style="margin-top: 20px;" @click="quickOperationAction(2)">日释放</el-button>
                <el-button plain style="margin-top: 20px;" @click="quickOperationAction(3)">月释放</el-button>
                <el-button plain style="margin-top: 20px;" @click="quickOperationAction(4)" v-if="passRole(['admin'])">微信上报发货单转换</el-button>
                <!-- <el-button plain style="margin-top: 20px;" @click="quickOperationAction(5)" v-if="passRole(['admin'])">设置秒杀商品</el-button> -->
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col style="width: 49%;margin-left: 10px;">
                <el-row :gutter="24" v-if="passRole(['admin', '鑫珑名品运营管理员'])" style="margin-top: 10px;background-color: #FFF;">
                    <el-col :span="24">
                        <div style="font-size: 14px;color: #333;font-weight: bold;margin-left: 20px;margin-top: 20px;">实时数据</div>
                    </el-col>
                    <el-col :span="6" class="poolItem">
                        <div>结余购物积分</div>
                        <div class="mumber">{{ totalityData.incomesAll }}</div>
                    </el-col>
                    <el-col :span="6" class="poolItem">
                        <div>结余锁定补贴</div>
                        <div class="mumber">{{ totalityData.incomesLocked }}</div>
                    </el-col>
                    <el-col :span="6" class="poolItem">
                        <div>结余贡献值</div>
                        <div class="mumber">{{ count.mul(totalityData.contributionValue, 1) }}</div>
                    </el-col>
                    <el-col :span="6" class="poolItem">
                        <div>结余抵扣积分</div>
                        <div class="mumber">{{ totalityData.incomesCreditAll }}</div>
                    </el-col>
                    <el-col :span="6" class="poolItem">
                        <div>结余原积分</div>
                        <div class="mumber">{{ totalityData.incomesOriginalAll }}</div>
                    </el-col>
                    <el-col :span="6" class="poolItem">
                        <div>提现中</div>
                        <div class="mumber">{{ totalityData.outMoneying }}</div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col style="width: 49%;margin-left: 10px;">
                <el-row :gutter="24" v-if="passRole(['admin', '鑫珑名品运营管理员'])" style="margin-top: 10px;background-color: #FFF;">
                    <el-col :span="24">
                        <div style="font-size: 14px;color: #333;font-weight: bold;margin-left: 20px;margin-top: 20px;">资金池面板</div>
                    </el-col>
                    <el-col :span="6" class="poolItem">
                        <div>日释放池</div>
                        <div class="mumber">{{ totalityData.freePoolDay }}</div>
                    </el-col>
                    <el-col :span="6" class="poolItem">
                        <div>月释放池</div>
                        <div class="mumber">{{ totalityData.freePoolMonth }}</div>
                    </el-col>
                    <el-col :span="6" class="poolItem">
                        <div>运营补贴池</div>
                        <div class="mumber">{{ totalityData.operationAwardPool }}</div>
                    </el-col>
                    <el-col :span="6" class="poolItem">
                        <div>供应链奖励池</div>
                        <div class="mumber">{{ totalityData.supplyAwards }}</div>
                    </el-col>
                    <el-col :span="6" class="poolItem">
                        <div>助残基金池</div>
                        <div class="mumber">{{ totalityData.helpFundPool }}</div>
                    </el-col>
                    <el-col :span="6" class="poolItem">
                        <div>毛利润</div>
                        <div class="mumber">{{ totalityData.grossProfit }}</div>
                    </el-col>
                </el-row>
            </el-col>
            
            
        </el-row>
        
        <el-row style="margin-top: 10px;background-color: #FFF;">
            <el-col :span="4" class="orderItem">
                <div>待发货订单（笔）</div>
                <div class="mumber">{{ totalityData.wait_send_count }}</div>
            </el-col>
            <el-col :span="4" class="orderItem">
                <div>待收货订单（笔）</div>
                <div class="mumber">{{ totalityData.wait_rake_count }}</div>
            </el-col>
            <el-col :span="4" class="orderItem">
                <div>在售商品总数（个）</div>
                <div class="mumber">{{ totalityData.selling_count }}</div>
            </el-col>
            <!-- <el-col :span="4" class="orderItem">
                <div>库存预警商品数（个）</div>
                <div class="mumber">{{ totalityData.stock_short_count }}</div>
            </el-col> -->
        </el-row>
        <el-row v-if="passRole(['admin', '鑫珑名品运营管理员'])" style="background-color: #FFF;margin-top: 10px;padding: 10px;">
            <el-col>
                总体数据
                <el-form :model="searchParams" ref="searchParams" :inline="true" style="margin-top: 20px;">
                    <el-form-item prop="dates" label="">
                        <el-date-picker
                            @change="changeTime"
                            v-model="dateRange"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-right: 40px">
                        <el-button @click="handleSearch" type="primary" icon="el-icon-search" style="margin-left:40px">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-radio-group v-model="dateCycle" @change="dateCycleChange">
                            <el-radio-button label="day">日</el-radio-button>
                            <el-radio-button label="month">月</el-radio-button>
                            <el-radio-button label="year">年</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="24">
              <el-table :data="financeList" size='medium' border>
                <el-table-column label="日期" prop="dateValueStr" :show-overflow-tooltip="true" width="100px"/>
                <el-table-column label="充值/扣除购物积分" prop="realPayForWxPay" :show-overflow-tooltip="true">
                    <template slot-scope="{row, index}">
                        <div>管理员新增： {{ row.addIncomeFromAdminNew }}</div>
                        <div>管理员扣除： {{ row.subIncomeFromAdminNew }}</div>
                        <div>总新增： {{ row.addIncomeFromAdminAll }}</div>
                        <div>总扣除： {{ row.subIncomeFromAdminAll }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="充值/扣除原积分" prop="realPayForWxPay" :show-overflow-tooltip="true">
                    <template slot-scope="{row, index}">
                        <div>管理员新增： {{ row.addIncomesOriginalAdminNew }}</div>
                        <div>管理员扣除： {{ row.subIncomesOriginalFromAdminNew }}</div>
                        <div>总新增： {{ row.addIncomesOriginalFromAdminAll }}</div>
                        <div>总扣除： {{ row.subIncomesOriginalFromAdminAll }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="微信支付" prop="realPayForWxPay" :show-overflow-tooltip="true">
                    <template slot-scope="{row, index}">
                        <div>新增： {{ row.realPayForWxPay }}</div>
                        <div>总额： {{ row.realPayForWxPayAll }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="购物积分" prop="realPayForIncomes" :show-overflow-tooltip="true">
                    <template slot-scope="{row, index}">
                        <div>新增： {{ row.realPayForIncomes }}</div>
                        <div>总额： {{ row.realPayForIncomesAll }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="用户提现" prop="outMoney" :show-overflow-tooltip="true">
                    <template slot-scope="{row, index}">
                        <div>新增： {{ row.newOutMoney }}</div>
                        <div>总提现： {{ row.outMoneyAll }}</div>
                        <div> 结余购物积分： {{ row.balanceIncomes }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="用户提现手续费" prop="newOutServiceCharge" :show-overflow-tooltip="true">
                    <template slot-scope="{row, index}">
                        <div>新增： {{ row.newOutServiceCharge }}</div>
                        <div>总手续费： {{ row.outMoneyServiceChargeAll }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="释放补贴" prop="newFreeProperay" :show-overflow-tooltip="true">
                    <template slot-scope="{row, index}">
                        <div>新增： {{ row.newFreeIncome }}</div>
                        <div>总释放： {{ row.freeIncomeAll }}</div>
                    </template>
                </el-table-column>

                
                </el-table>
            </el-col>
            <el-col>
                <pagination
                style="background: #ffffff; height: 50px"
                v-show="totalSize > 0"
                :total="totalSize"
                :page.sync="page"
                :limit.sync="size"
                @pagination="findFinanceList"
                />
            </el-col>
        </el-row>
        <input type="file" ref="fileInput" @change="handleFileChange" style="display: none;">
        <dayFreeDialog ref="dayFreeDialog" @confirm="getTotalityData"></dayFreeDialog>
        <monthFreeDialog ref="monthFreeDialog" @confirm="getTotalityData"></monthFreeDialog>
    </div>
</template>

<script>
import dayFreeDialog from './components/dayFreeDialog.vue'
import monthFreeDialog from './components/monthFreeDialog.vue'
import { formData as formDataForLessee } from '@/views/system/lessee/data.js'
import { importExcelForWx } from '@/api/pay/order.js'

export default {
    components: { dayFreeDialog, monthFreeDialog },
    data() {
        return {
            role: '',
            totalityData: {},
            financeList: [],
            page: 1,
            size: 10,
            totalSize: 0,
            dateCycle: 'day',
            dateRange: [],
            searchParams: {},
            formDataForLessee,
            pickerOptions: {
                shortcuts: [{
                text: '最近7天',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    end.setTime(end.getTime() + 3600 * 1000 * 24 * 1);
                    picker.$emit('pick', [start, end]);
                }
                }, {
                text: '最近30天',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    end.setTime(end.getTime() + 3600 * 1000 * 24 * 1);
                    picker.$emit('pick', [start, end]);
                }
                }, {
                text: '最近365天',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                    end.setTime(end.getTime() + 3600 * 1000 * 24 * 1);
                    picker.$emit('pick', [start, end]);
                }
                }, {
                text: '最近1000天',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 1000);
                    end.setTime(end.getTime() + 3600 * 1000 * 24 * 1);
                    picker.$emit('pick', [start, end]);
                }
                }]
            },
        }
    },
    created(){
        this.role = this.$store.getters.userModel.role
        this.getTotalityData()
        this.handleSearch()
    },
    methods: {
        setGoldAction(){
            this.$refs.setGoldDialog.show(this.$store.getters.userModel.lessee)
        },
        quickOperationAction(val){
            switch (val) {
                case 1:
                    this.$router.push({name: 'Update', query: {rowId: this.$store.getters.lessee.id, formData: encodeURIComponent(JSON.stringify(this.formDataForLessee)), currentRouteName: this.$route.name}})
                    break;
                case 2:
                    this.$refs.dayFreeDialog.show(this.$store.getters.lessee.id)
                    break;
                case 3:
                    this.$refs.monthFreeDialog.show(this.$store.getters.lessee.id)
                    break;
                case 4:
                    this.$refs.fileInput.click()
                    break;
                default:
                    break;
            }
        },
        handleFileChange(event) {
            const file = event.target.files[0]
            if (file) {
                const formData = new FormData()
                formData.append('file', file)

                importExcelForWx(formData).then((res) => {
                    const link = document.createElement('a');
                    let blob = new Blob([res.data], {
                    type: 'application/vnd.ms-excel'
                    });
                    link.href = URL.createObjectURL(blob);
                    var filename = this.formatTime.dateFormat('YYYYMMDDhhmmss', Date.now())
                    link.download = '导入微信批量发货模版' + filename + '.xlsx';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                })

                // axios.post('/api/upload', formData, {
                //     headers: {
                //         'Content-Type': 'multipart/form-data'
                //     }
                // })
                // .then(response => {
                //     console.log('File uploaded successfully:', response.data)
                //     // 处理上传成功后的逻辑
                // })
                // .catch(error => {
                //     console.error('Error uploading file:', error)
                //     // 处理上传失败后的逻辑
                // })
            }
        },
        changeTime(){
            if(this.dateRange && this.dateRange.length>0){
                this.searchParams.startTime = this.dateRange[0]
                this.searchParams.endTime = this.dateRange[1]
            }else{
                this.searchParams.startTime = ''
                this.searchParams.endTime = ''
            }
        },
        dateCycleChange(e){
            this.handleSearch()
        },
        handleSearch(){
            this.page = 1
            this.findFinanceList()
        },
        outMoney(){
            if(this.role=='alliance'){
                this.$router.push({name: 'outMoney'})
            }else{
                this.$router.push({name: 'outMoneyForShop'})
            }
        },
        getTotalityData(){
            this.request_post('/common/largeData/getTotalityData/', {}).then((res) => {
            if(res.data.code == 10000){
              this.totalityData = res.data.data
            }
          })
        },
        findFinanceList(){
            this.searchParams.page = this.page
            this.searchParams.size = this.size
            this.searchParams.dateCycle = this.dateCycle
            this.request_get('/pay/financeForLessee/', this.searchParams).then((res) => {
            if(res.data.code == 10000){
                this.totalSize = res.data.data.total_count
                this.financeList = res.data.data.list
            }
          })
        },
    }
}
</script>

<style lang="scss" scoped>
.container{
  margin: 10px;
}
.orderItem{
    background-color: #FFF;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .mumber{
        font-size: 30px;
        margin-top: 10px;
    }
}
.poolItem{
    background-color: #FFF;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .mumber{
        font-size: 20px;
        margin-top: 10px;
    }
}
</style>
